<template>
  <view class="tui-skeleton">
    <l-background />

    <view id="top">
      <driver-item :show-btn="false" :item="info" />
      <view class="padding-lr-30 bg-white">
        <view class="border padding-right-40 flex-row align-center justify-between">
          <view v-for="item in licences" :key="item" class="flex-row flex-center">
            <view class="point" />
            <text class="text-28 color-t2">{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="padding-bottom-20" />
    </view>

    <view class="bg-white">
      <view id="title" class="padding-bottom-20 padding-lr-30 padding-top-30 bg-white flex-row align-center justify-between">
        <text class="text-30 color-t1 tui-skeleton-fillet">对司机的评价</text>
        <text class="text-28 color-t3 tui-skeleton-fillet" @click="jump('/driver/driver-evaluation/driver-evaluation')">{{ total }}条评价 >></text>
      </view>

      <scroll-view :style="{height:height+'px'}" class="relative" scroll-y @scrolltolower="nextPage">
        <view class="padding-lr-30 padding-bottom-30">
          <template v-if="list.length">
            <apprise-item v-for="(item,index) in list" :key="index" :item="item" />
            <l-footer :has-more="hasMore" background-color="#ffffff" />
          </template>
          <l-no-data v-else text="暂无评价" type="data" />
        </view>
        <safe-area-bottom />
      </scroll-view>
    </view>

    <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
    <l-bottom-button background="#ffffff" :text="'确认选择 ￥'+info.driverFee" @click="handleConfirm" />
  </view>
</template>

<script>
import DriverItem from '../components/driver-item/driver-item'
import AppriseItem from '../components/apprise-item/apprise-item'
import { mapMutations } from 'vuex'
import { pageDriverPraise } from '../api'
import { preloadData } from './index'
export default {
  name: 'PlatformDriverDetail',
  components: {
    DriverItem,
    AppriseItem
  },
  data() {
    return {
      preloadData,
      info: {},
      licences: ['身份证', '驾驶证', '道路运输从业资格证'],
      height: 0,
      list: [],
      total: 0,
      param: {
        page: 1,
        size: 10
      },
      showSkeleton: true,
      hasMore: true
    }
  },
  onLoad(e) {
    this.info = JSON.parse(e.info)
    this.pageDriverPraise()
  },
  onPullDownRefresh() {
    this.reload()
  },
  mounted() {
    this.getHeight()
  },
  methods: {
    getHeight() {
      const wHeight = this.sysInfo().windowHeight - this.px()
      this.getElementInfo('#top', res => {
        this.height = wHeight - res.height
        this.getElementInfo('#title', res => {
          this.height -= res.height
        })
      })
    },
    // 确认选择司机
    handleConfirm() {
      this.setChooseDriverInfo({
        driverId: this.info.userId,
        driverName: this.info.driverName,
        platformDriverFee: this.info.driverFee
      })
      this.jump(2)
    },
    // 分页获取司机评价
    async pageDriverPraise() {
      const [err, res] = await pageDriverPraise(this.info.userId, this.param)
      this.showSkeleton = false
      uni.stopPullDownRefresh()
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      this.total = data.total
      let list = data.records
      if (!list) list = []

      if (list.length < this.param.size) this.hasMore = false

      if (this.param.page === 1) this.list = list
      else this.list.push(list)
    },
    nextPage() {
      if (this.hasMore) {
        this.param.page++
        this.pageDriverPraise()
      }
    },
    reload() {
      this.param.page = 1
      this.hasMore = true
      this.pageDriverPraise()
    },
    ...mapMutations({
      setChooseDriverInfo: 'order/setChooseDriverInfo'
    })
  }
}
</script>

<style scoped lang="scss">
.border{
  padding-left:14rpx;
  border-top:2rpx solid $color-border;
  height:80rpx;
}
.point{
  width:12rpx;
  height: 12rpx;
  border-radius:50%;
  background:$color-primary;
  margin-right: 10rpx;
}
</style>
